<template>
	<view class="container">
		<view class="content">
			<view class="top-box">
				<view class="fs50 fw6">Hi 你好</view>
				<view>欢迎使用科目三，让你轻松拿证</view>
			</view>
			<view class="login-box">
				<view v-if="pwd_vc">
					<view class="mui_img">
						<span class="telPlus">+86</span>
						<input class="mui-input-clear" v-model="phoneNum" placeholder="输入登录账号" />
					</view>
				</view>
				<view v-else>
					<view class="mui_img">
						<image src='http://test.dowell-driver.com/img/login_user_normal.png' />
						<input cursor-spacing="20" type="tel" class="mui-input-clear-1" v-model="phoneNum"
							placeholder="请输入注册手机号码" maxlength="11" />
					</view>
					<view class="mui_img">
						<image src='http://test.dowell-driver.com/img/yzmicon.png' />
						<input cursor-spacing="20" type="number" class="mui-input-clear" v-model="code" maxlength="6"
							placeholder="请输入验证码" />
						<view class="btn-code" :style="disabletf?'opacity: 0.5':'opacity:1'" @click="getVerifiCode()">
							{{code_time}}
						</view>
					</view>
					<view class="mui_img">
						<image src='http://test.dowell-driver.com/img/login_psw_normal.png' />
						<input cursor-spacing="20" type="password" v-model="password" class="mui-input-clear-1"
							placeholder="输入登录密码(由6-12位数字和字母组成)" maxlength="12" />
					</view>
					<view class="mui_img">
						<image src='http://test.dowell-driver.com/img/login_psw_normal.png' />
						<input cursor-spacing="20" type="password" v-model="password2" class="mui-input-clear-1"
							placeholder="请再次输入登录密码" maxlength="12" />
					</view>
				</view>

				<view class="agreement-box">
					<radio :checked="isAgreed" value="1" @click="changeRadio()">
						我已阅读并同意
					</radio>
					<text class="text-blue top2" @click='publicJump("service_agreement","用户服务协议")'>《用户服务协议》</text>
					<text class="top2">和</text>
					<text class="text-blue top2" @click='publicJump("privacy_policy","隐私政策协议")'>《隐私政策协议》</text>
				</view>
				<view v-if="pwd_vc">
					<view class="mui_btn">
						<button @click="login_code()" type="primary" :disabled="!isAgreed">登 录</button>
					</view>
					<view class="mui_forgive" @click="handleChange()">
						切换密码登录
					</view>
				</view>
				<view v-else class="mui_btn">
					<button @click="login_pwd()" type="primary" :disabled="!isAgreed">注 册</button>
					<view class="mui_forgive">
						<!-- <span class="fl" @click="handleChange()">手机号登录</span> -->
						<span class="fr" @click="gologin()">账号登录</span>
					</view>
				</view>
			</view>
		</view>

		<!-- #ifdef APP-PLUS -->
		<view class="model-box" v-show="showAgreeModel">
			<view class="model-nav">
				<view class="model-title">用户使用协议和隐私政策</view>
				<view style="text-indent: 56rpx;">
					请你务必审慎阅读、充分理解“用户使用协议”和“隐私政策”各条款，
					包括但不限于:为了更精确的向你提供自定义头像，考场位置信息，
					定位当前位置等服务，我们需要收集您的设备上的照片、
					媒体内容和文件，申请位置权限等。你可以在“设置”中查看、变更、
					删除个人信息并管理你的授权。你可以阅读
					<text class="text-blue" @click='publicJump("service_agreement","用户服务协议")'>《用户服务协议》</text>和
					<text class="text-blue" @click='publicJump("privacy_policy","隐私政策协议")'>《隐私政策》</text>
					了解详细信息。如你同意，请点击'同意'开始接受我们的服务;
				</view>
				<view class="btn-box text-blue">
					<view @click="tuichuapp()">暂不使用</view>
					<view @click="handleAgree()">同意</view>
				</view>
			</view>
		</view>
		<!-- #endif -->

	</view>
</template>

<script>
	import {
		showTishi,
		phone_ver
	} from 'utils/index.js';

	import {
		handleLogin,POSTcaptcha
	} from '@/common/api/login.js';
	import {
		gettoken,postcaptcha,postregister
	} from '@/common/api/index.js'
	// import CryptoJS from 'crypto-js';
	import {
		Base64
	} from '@/common/js_sdk/js-base64';
	import md5 from '@/common/js_sdk/js-md5/src/md5.js';

	export default {
		data() {
			return {
				pwd_vc: false, //true=密码  false验证码 
				showAgreeModel: false,
				isAgreed: false,
				token: {},
				code_time: '获取验证码',
				disabletf: false,
				
				// password: 'Admin@123',
				// phoneNum: 'admin',  
				phoneNum: '',
				code:'',
				password:'',
				password2:'',
				
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			// console.log(uni.getStorageSync('agreeModelShow'),'询问model要显示吗')
			this.showAgreeModel = !uni.getStorageSync('agreeModelShow')
			// #endif



			// 第一步获取到token
			this.gettokenmethods()
		},
		methods: {
			// 获取验证码
			getVerifiCode() {
				var _this = this
				if (_this.disabletf) {
					return
				}
				if (!phone_ver(_this.phoneNum)) {
					showTishi('请填写正确的手机号')
				} else {
					POSTcaptcha(_this.phoneNum).then(res => {
						console.log(res,'ressss');
							_this.countDown(60)
							showTishi('已发送验证码')
						// if (res.status == 0) {
						// 	_this.countDown(60)
						// 	showTishi('已发送验证码')
						// } else {
						// 	showTishi(res.detail);
						// }
					})
				}
			},
			// 验证码倒计时
			countDown(s) {
				var _this = this
				s--;
				if (s == 0) {
					_this.code_time = '获取验证码';
					_this.disabletf = false
				} else {
					_this.code_time = s + '秒后可重发';
					_this.disabletf = true
					setTimeout(function() {
						_this.countDown(s);
					}, 1000)
				}
			},
			// 跳转到注册页面
			gologin() { 
				uni.navigateTo({
					url: '/pages/login/index', // 替换为你的 tabBar 页面路径
					success: function(res) {
						// 跳转成功的回调
						console.log(res, '跳转成功')
					},
					fail: function(err) {
						// 错误处理
						console.log(err, '为什么不跳转')
					}
				});
			},
			// 获取token信息
			gettokenmethods() {
				gettoken({
					username: 'admin',
					password: 'Admin@123'
				}).then(res => {
					this.token = res
				})
			},
			handleChange() {
				this.pwd_vc = !this.pwd_vc
				this.isAgreed = false
				if (!this.pwd_vc) {
					this.password = 'Admin@123';
					this.phoneNum = 'admin';
				} else {
					this.password = '';
					this.phoneNum = '';
				}
			},
			handleAgree() {
				if (plus.os.name.toLowerCase() === 'android') {
					plus.runtime.agreePrivacy()
				}
				uni.setStorageSync('agreeModelShow', true)
				this.isAgreed = true
				this.showAgreeModel = false
			},
			changeRadio() {
				this.isAgreed = !this.isAgreed
			},
			// =====账号密码登录=====
			login_pwd() {
				var _this = this
				console.log(_this.phoneNum,_this.code,_this.password,_this.password2,_this.password == _this.password2,'_this');
				if (_this.phoneNum == '') {
					showTishi('请输入手机号')
				} else if (_this.code == '') {
					showTishi('请输入验证码')
				}else if (_this.password == '') {
					showTishi('请输入密码')
				}else if (_this.password != _this.password2) {
					_this.password2='' 
					showTishi('二次密码不一致，请重新输入')
				}else if (!this.isAgreed) {
					uni.showToast({
						title: '请选择用户协议和隐私政策',
						icon: 'none'
					})
				} else { 
					// 获取登录信息
					// console.log();
					let params={
						username:_this.phoneNum,
						password:_this.password,
						captcha:_this.code,
					}
					postregister(params).then(res=>{
						if (res.status == 0) {
							showTishi('注册成功！')
							handleLogin(_this.phoneNum,_this.password);
						} else {
							showTishi(res.msg);
						}
					})
				}
			},
			login_code() {
				if (!phone_ver(this.phoneNum)) {
					showTishi('请填写正确的手机号')
				} else if (!this.isAgreed) {
					uni.showToast({
						title: '请选择用户协议和隐私政策',
						icon: 'none'
					})
				} else {
					// uni.navigateTo({
					// 	url: '/pages/login/login_code?phone=' + this.phoneNum
					// })
					let openid = uni.getStorageSync('openId')
					if (openid) {
						this.password = openid
						this.login_pwd()
					} else {
						uni.showToast({
							title: '暂无openid',
							icon: 'none'
						})
					}
				}
			},
			changeRoute(url) {
				uni.navigateTo({
					url: url
				})
			},
			publicJump(url, title) {
				uni.navigateTo({
					url: '/pages/public_jump?url=' + url + '&title=' + title
				})
			},
			tuichuapp() {
				if (plus.os.name.toLowerCase() === 'android') {
					plus.runtime.disagreePrivacy()
					plus.runtime.quit();
				} else {
					const threadClass = plus.ios.importClass("NSThread");
					const mainThread = plus.ios.invoke(threadClass, "mainThread");
					plus.ios.invoke(mainThread, "exit");
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		top: 50rpx;
		padding: 1rem;
		position: relative;
	}

	.top-box {
		font-size: 30rpx;
		color: #666;
		line-height: 60rpx;
		padding-bottom: 2rem;

		.fw6 {
			color: #040404;
			font-weight: bold;
			font-size: 40rpx;
		}
	}


	.mui_img image {
		float: left;
		width: 40rpx;
		height: 40rpx;
		margin-top: 25rpx;
	}

	.mui_img {
		border-radius: 5px;
		height: 90rpx;
		line-height: 90rpx;
		position: relative;
		background: #f7f7f7;
		padding: 0 8px;
		margin-bottom: 16rpx;
	}

	.telPlus {
		float: left;
		height: 100%;
		font-size: 26rpx;
		width: 30rpx;
	}



	.mui-input-clear {
		float: left;
		font-size: 28rpx;
		margin-left: 3%;
		width: 50%;
		vertical-align: middle;
		border: 1px solid #F38010;
		border-radius: 16rpx;
		border-radius: 10px;
		height: 90rpx;
		padding-left: 20rpx;
	}

	.mui-input-clear-1 {
		float: left;
		font-size: 28rpx;
		margin-left: 3%;
		width: 85%;
		vertical-align: middle;
		border: 1px solid #F38010;
		border-radius: 16rpx;
		border-radius: 10px;
		height: 90rpx;
		padding-left: 20rpx;
	}

	.btn-code {
		position: absolute;
		color: #0172FF;
		text-align: center;
		border: 0;
		background-color: 0;
		width: 200rpx;
		line-height: 90rpx;
		height: 90rpx;
		right: 0;
		top: 0px;
		font-size: 26rpx;
	}


	.mui_btn {
		text-align: center;
		clear: both;
		position: relative;
		top: 10px;
	}

	.mui_forgive {
		margin-top: 60rpx;
		font-size: 28rpx;
		color: #ada9a9;
		display: flex;
		justify-content: space-between;
	}

	.agreement-box {
		color: #ada9a9;
		font-size: 25rpx;
		margin-top: 30px;
		margin-bottom: 10px;
		text-align: center;

		.top2 {
			position: relative;
			top: 2px;
		}
	}

	.text-blue {
		color: #007AFF;
	}

	.model-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.8);

		.model-nav {
			float: left;
			width: 70%;
			background: #FFFFFF;
			padding: 20rpx 30rpx;
			border-radius: 24rpx;
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);

			.model-title {
				text-align: center;
				width: 100%;
				line-height: 80rpx;
				font-size: 40rpx;
				color: #000;
				font-weight: bold;
			}

			.btn-box {
				margin-top: 30rpx;
				line-height: 80rpx;
				font-size: 40rpx;
				display: flex;
				justify-content: space-around;
			}
		}
	}
</style>